Закладки

Типографика в вебе. Функциональные компоненты статьи

Мы познакомимся с базовыми понятиями журналистики, разберем, из каких функциональных компонентов состоит статья
Чтобы понять что такое веб-типографика и какие есть нюансы в оформлении текста в интернете, необходимо провести исследование: найти сайты, которые уделяют особое внимание оформлению текста, погрузиться в опыт издательств, разобраться с терминологией, выделить типовые элементы, сгруппировать их и каждую группу проанализировать.
Типографика включает в себя много параметров: выбор и сочетание шрифтов, оформление текста, взаимодействие текста и иллюстраций. В традиционной типографике много внимания уделяется формату — в зависимости от носителя меняются расстояния и размеры.

В вебе интерфейс и вовсе выходит на первый план. Во-первых, сразу же нужно учитывать, что один и тот же текст будет воспроизводиться на разных экранах — от большого десктопного компьютера до телефона. Ну и в целом, электронный формат имеет много особенностей: относительная линейность чтения, невозможность охватить весь текст одним взглядом, отличный от печатных носителей сценарий потребления информации.

Учитывая все это, мы рассмотрели как традиционные для печатной журналистики функциональные компоненты статьи адаптируются к новому формату и какие появляются новые элементы, характерные только для веба.

Канон Ван де Граафа, по которому строится книжная полоса
В традиционной типографике существуют свои правила для «интерфейса»

Функциональные компоненты статьи в вебе

Обложка ~ Заголовок ~ Заголовочный комплекс ~ Лид ~ Абзац ~ Ключевая фраза ~ Карточка ~ Цитата ~ Персона ~ Прямая речь ~ Разделитель ~ Нумерация~ «Подкат» ~ Изображение или видео ~ Credits
1

Обложка

Первое, что человек видит на странице. Сообщает о чем материал и побуждает его прочесть.
Чем интереснее и оригинальнее вы оформите обложку, тем больше шансов, что материал прочитают. Обложка — тизер, эмоциональный заряд на прочтение материала.

Полноэкранные обложки

Занимают всю площадь экрана по ширине и по высоте. Такие обложки используются в спецпроектах или на страницах, которые должны вдохновить, продать что-то.

Обложка в половину экрана

По высоте не 100%, а около 60 или 70%. В этом случае у обложки скорее утилитарная, чем имиджевая функция: акцент смещается на информацию, которая следует за обложкой.

Обложка, вписанная в сетку сайта

В этом случае обложка занимает несколько колонок — шесть или восемь.

Обложка содержит:

Заголовок — сообщает о чем материал. Часто встречается, когда к заголовку добавляют описание, которое расшифровывает заголовок. Заголовок и описание должны взаимодействовать друг с другом. Заголовок впечатляет, а описание дополняет и информирует.

Название рубрики — часто добавляют над заголовком: путешествие, интервью. Иногда вместо названия рубрики ставится логотип, если это совместный спецпроект редакции и какого-либо бренда.

Фотография и имя автора материала ставится на обложку, в случае если автор известный и пользуется популярностью — люди приходят читать именно его.

Кнопка «листать вниз» последнее время появляется все реже — люди и так привыкли, что надо прокрутить дальше.

Социальные кнопки для расшаривания можно часто увидеть на обложке, но тут нужно понимать, что в этом месте они выполняют скорее имиджевую функцию — если «лайков» много, то материал будут читать охотнее. Расшаривать же сразу, не прочитав, никто не будет, поэтому социальные кнопки нужно продублировать и поставить в конце материала, или же на залипающую панель, которая видна в любой точке статьи.

Графика. Как правило у обложки есть фоновое изображение или видео. Нужно очень внимательно подойти к выбору фотографии, потому что она «продает» страницу. Фотография не должна быть слишком пестрой, чтобы текст обложки не спорил с графикой. В случае с видео — нужно использовать медленную, плавную запись, которая не будет мешать прочтению текста. Такое видео можно назвать атмосферным. Если видео значимое, имеет сюжет, важный для материала, то лучше поставить его отдельно в плеере внутри статьи, а для обложки вырезать 10 секунд. Не размещайте основной ролик в обложке.

Обложка может быть и без фотографии. Не переживайте, если не можете найти классную иллюстрацию, поставьте на фон цвет или градиент.
Главное правило обложки — должен читаться текст.
Если изображение конкурирует с текстом, его можно приглушать с помощью фильтра — сплошного или градиентного. Он затемнит, высветлит или окрасит фото или видео в какой-либо цвет, улучшив читаемость текста.
2

Заголовок

Заголовки задают структуру всему материалу. По функциональности они образуют иерархию: сначала идет заголовок всего материала, затем раздела (главы), потом подраздела.
Заголовок — это не просто «текст посередине», они содержат определенные функции. Заголовки задают структуру материала, поэтому нужно следить, чтобы заголовки имели четкую визуальную иерархию: заголовок подраздела не может быть крупнее заголовка раздела.

Почему важны заголовки?

Задают структуру материала

Влияют на решение читателя стоит ли материал внимания или нет

Передают общую суть при скимминге*

Влиют на виральность**. Если заголовок удачный, люди охотнее кликают на него и делятся прочитанным с большей вероятностью.
*Скимминг (англ. skimming — бегло просматривать) — техника чтения, когда текст читается как можно быстрее с целью понять основное содержание и общую структуру текста или выбрать главные факты. В отечественной методике также используется термин «ознакомительное чтение».

**Виральность (англ. virality — вирусность) — характеристика, определяющая вероятность того, что контент будет стремительно распространятся силами пользователей.

Кто пишет заголовки?


В издательствах заголовки придумывает редактор, а не автор текста, так как автор обычно слишком погружен в материал, и ему сложно взглянуть на статью со стороны.

Если вы работаете над текстом самостоятельно, попробуйте во время редактирования выписывать из текста ключевые слова и затем на их основе придумать заголовки.

Редактором может выступить и дизайнер. Свежий взгляд поможет обобщить и выделить суть написанного.

Какие бывают заголовки?

Мы выделили несколько видов часто встречающихся заголовков
1. Прямо передают содержание текста. Характерны для новостной и деловой журналистики.
2. В заголовке используется метафора или игра слов. Такой заголовок привлекает внимание и воздействует эмоционально, но не очень хорошо работает в вебе. Если в печатном издании у читателя нет выбора — он уже купил газету или журнал, то в интернете неочевидность заголовка приводит к тому, что по нему реже кликают.

Подборка заголовков газеты Коммерсантъ, основанных на данном приеме http://www.kommersant.ru/doc/2159081
3. Заголовки, которые обращаются к базовым потребностям человека: быть в безопасности, быть здоровым, быть успешным.
4. Заголовки, содержащие цифры. Это могут быть либо списки, либо просто заголовки, в которых упоминаются числительные. И то, и другое хорошо работает — люди любят цифры. Но не следует злоупотреблять этим приемом, чтобы не выработать своеобразную «слепоту». Не ставьте числа в каждый заголовок, просто чтобы увеличить число кликов, берегите доверие ваших читателей.
5. «Читерские» заголовки. Главная цель — заставить читателя кликнуть и перейти по ссылке. Чтобы разжечь любопытство, используются приемы: заголовок содержит намек на неожиданное развитие событий, обращается к читателю на «ты», изобилуют восклицательными знаками и многоточиями, содержит яркие эпитеты и превосходные степени и т.д.
6. Заголовки, начинающиеся со слова «как». Такие заголовки также пользуются большей популярностью: «как» обещает инструкцию, какой-то простой ответ на сложный вопрос.
3

Заголовочный комплекс

Комбинация заголовка, подзаголовка и названия рубрики.
Заголовочный комплекс позволяет не перегружать заголовок. В этом случае заголовок выполняет контактную функцию — «цепляет», побуждает прочитать материал, а подзаголовок — информативную: поясняет о чем статья.

В такой структуре информация считывается очень легко — читатель очень быстро видит суть. Заинтересовал заголовок — прочитал еще пару строк, увлекательно — читает еще дальше.
Заголовочный комплекс добавляет логику в чтение.
Заголовочный комплекс может быть как на обложке, так и внутри материала. Использовать заголовок и подзаголовок — в целом хорошая практика. Это добавляет объем тексту и влияет на скорость ознакомления. Люди все время спешат, поэтому важно, чтобы интерфейс увеличивал скорость восприятия.
4

Лид

Лид (англ. lead — вести) — одно-два предложения в начале статьи.
Задача лида – привлечь внимание читателя. Именно после прочтения лида многие решают, стоит ли им читать материал дальше.

Лид может либо кратко передавать/пересказывать суть материала, либо содержать вовлекающий текст, который стимулирует прочитать текст полностью.

Лиды различают по объему: они могут быть короткими: одно-два предложения или «затяжными».
Задача лида — продать материал
Объем лида зависит от того, сколько он занимает места на экране. Для лида обычно используется более крупный шрифт, поэтому нужно смотреть насколько удобно его читать. Скорость чтения крупного текста ниже, поэтому если текста слишком много, то читатель может споткнуться и не дочитать до конца.
Лид и подзаголовок — два разных понятия. Подзаголовок дополняет заголовок, расшифровывает его, а лид является введением к тексту.
5

Абзац

Единица основного текста, которая сообщает одну мысль. Состоит из одного или нескольких предложений.
Абзацы упорядочивают текст, делают его проще для восприятия и чтения. Первые фразы абзаца позволяют читателю легко сориентироваться в тексте и понять стоит ли читать дальше.

Оформление абзаца


Буквица — первая прописная буква раздела (обычно увеличенного размера). Буквица хорошо работает, когда текста много. Если дробление на разделы слишком частое, то буквица выглядит избыточно.

Красная строка. Первая строка абзаца, содержащая отступ. Красная строка часто используется в традиционной, печатной типографике и не очень популярна в вебе.

Швейцарский абзац — наиболее распространенный вид оформления. Абзацы отбиваются пустой строкой.

Жирное начертание. Хороший прием — выделить первое предложение, либо несколько слов, которые могут передать суть с помощью жирного начертания.

Капитель — то же самое, но вместо жирного начертания капитель. Существует заблуждение, что капитель — это уменьшенные до размера строчных прописные буквы, но это не так.
Капитель — особенное начертание в гарнитуре шрифта, вариант прописных букв уменьшенного размера и чуть расширенных пропорций. Капитель чуть выше роста строчных. Также капитель имеет увеличенное межбуквенное расстояние.

Оптимальная ширина строки


Ширина абзаца должна быть комфортной для чтения. Если строка слишком длинная, глазу будет трудно искать начало следующей. Если узкая, то взгляд будет часто перескакивать, это утомительно. Примерно строка должна содержать около 70-80 знаков или 9-12 слов. На основе этих параметров подбирается размер шрифта, который, в свою очередь влияет на межстрочное расстояние.

Базовые рекомендации

Соотношения размера кегля и межстрочного расстояния:
16px /26px
18px/28px
20px/30px

Ширина текстовой колонки — 8 колонок, 760 px.
Как прием, иногда можно уменьшить до 6 колонок (560px) , например, если текста мало и он зажат между двумя картинками.

Колонки


В вебе лучше не разбивать текст на колонки. Иногда можно сделать две, но нужно следить за тем, чтобы колонка всегда умещалась на экран. Иначе читателю нужно сначала проскроллить одну колонку, потом вернуться и прочитать вторую — это неудобно.

Размер шрифта нужно адаптировать в зависимости от устройства

В Tilda Publishing используется три-четыре градации кегля для разных устройств. В зависимости от ширины экрана шрифт меняет размер.
1280 — базовый текст. (20px)
1024 — минус два пикселя (18px)
640 и меньше — минус два пикселя (16 px)
Чем меньше устройство, тем компактнее шрифт
6

Ключевая фраза

Часть основного текста, вынесенная в материале отдельно.
Задача ключевой фразы добавить «воздуха», разбить монотонность и акцентировать внимание читателя на каком-либо интересном и важном моменте статьи.

Как оформляется ключевая фраза?


Чтобы выделить фразу из общего текста используют следующие приемы:
  • отличная от основного текста ширина строки (уже или шире)
  • другой шрифт (антиква, если в тексте гротеск и наоборот)
  • иное начертание шрифта (жирный или курсив)
  • разделительные элементы (полоски, кавычки)
  • более крупный шрифт

Ниже несколько примеров оформления ключевой фразы.
В традиционной журналистике обычно используется определение «врез» (или «вынос»). Задачи вреза те же, что и у ключевой фразы. Но во врезе, чаще всего, дублируется информация из основного текста. Это оправданно в прессе, когда читатель может взглядом пробежаться по развороту, считать вынесенные фразы, а потом, при подробном чтении их просто пропустить. В вебе чтение более линейное и странно заставлять читать человека то, что он уже прочел, только набранное крупным шрифтом. Поэтому мы не рекомендуем дублировать информацию и ввели понятие «ключевая фраза», чтобы подчеркнуть разницу.
7

Цитата

Дословная выдержка из какого-либо текста. Комментирует и дополняет основной текст.
Самый частый прием в оформлении цитат — отделить слева полосой. Но в целом цитаты — благодатный материал для того, чтобы оживить подачу текста. Цитату можно поставить на подложку, использовать интересную типографику, ввести дополнительный цвет.
8

Прямая речь

То же самое что и цитата, только от первого лица.
Прямая речь может быть небольшого объема, как выдержка из текста: 7-10 слов. А иногда прямая речь может быть самостоятельной единицей текста. В этом случае она более объемная и по форме похоже на базовый текст, но с добавлением фотографии говорящего и подписи.
9

Карточка

Элемент «объяснительной журналистики». Краткое и емкое объяснение какого-либо явления, понятия.
Формат появился с подачи vox.com. Редакторы стали объяснять новости с помощью блоков: короткими предложениями, помещенными на подложку. Эти блоки назвали cards — карточки.

Сейчас «карточки» используются не только в новостной журналистике, но и в обычных публикациях и спецпроектах.
10

Персона

Используется когда нужно выделить автора статьи, эксперта, комментатора или ключевого героя.
11

Разделитель

Элемент, который отделяет смысловые фрагменты текста.
Разделитель добавляет «воздуха» и декорирует текст.


Виды разделителей:

  • линия
  • декоративный элемент
  • цвет фона
  • цифра (может быть декорирована)
12

Нумерация

Используется для структурирования материала в случае если текст состоит из последовательных разделов, либо является списком.
Числа придают материалу конкретику и специфику, что читатели обычно ценят. Плюс числа разбивают текст на упорядоченные фрагменты, что вполне соответствует общему тренду «клипового сознания». Поэтому часто цифры используют не только в заголовках и в качестве разделителя, но и просто нумеруют абзацы, придавая материалу структурность.
13

«Подкат»

«Подкат» (англ. cut — резать) прием, когда текст делят на анонс и основную часть, и оставляют видимой только первую.
Хорошо работает, когда есть дополнительная информация большого объема. Например, есть мнения десяти экспертов и все развернутые и интересные, но по сюжету не решающие. Если их разместить полностью, то они заполнят все пространство. Поэтому их можно сократить — дать начало фразы и поставить «читать далее».
Под «кат» убирается дополнительная информация, в случае если она конкурирует с основной, содержательной частью.
14

Изображения или видео

Именно визуальная часть помогает передать атмосферу, раскрыть тему и погрузить пользователя в контекст.
Веб очень визуален, поэтому нужно стараться использовать как можно больше качественных изображений.

Варианты размещения иллюстраций в тексте


В тексте между абзацами текста. По размеру изображение может быть такой же ширины, либо чуть шире, чтобы задать интересный ритм, избежать формы «кирпича».

Полноэкранный. Хорошо работает, когда фотография интересная, у нее много деталей и ее хочется рассмотреть внимательнее.

Фотография, обтекаемая текстом. Иллюстрирует текст, но не прерывает повествование. Дополняет и не спорит с текстом.

Галерея. Если есть несколько изображений на одну тему, то их можно собрать в галерею, по аналогии с подкатом в тексте.

Комбинация изображений. Вместо галереи изображения можно скомпоновать в композицию. Поставить рядом несколько фото разных размеров.
Фотографии необходимо подписывать. В идеале это не просто описание происходящего на фото, а самостоятельный текст. Подпись к фотографии — особый жанр и часто, также как заголовки, придумываются не автором, а редактором.
Подписи к фотографиям придают материалу объем.
15

Credits

Информация об авторе текста, ссылки на источники фотографий.
С одной стороны, это техническая информация, но за счет того, что она содержит разнообразные элементы, тут есть пространство для поиска интересных типографических решений. Если они найдены, то выходные данные хорошо завершат материал графически.

Также в этом курсе

17
Цифровой сторителлинг
О новом способе рассказывать истории в интернете.
Предыдущая
19
Функциональные элементы Landing Page
Чтобы сделать Landing Page, нужно понять, из каких блоков она состоит, чем они наполнены, и как их оформить.
Следующая
Оглавление

© Обухов Н.В., 2015 Все права защищены. Перепечатка и цитирование материалов — только с разрешения автора.

По всем вопросам пишите на hello@tilda.cc